// 创建Vue实例
new Vue({
    el: '#app',
    data: {
        // 购物车商品列表，每个商品是一个对象，包含名称、图片、规格、价格、数量、选中状态等属性
        cartItems: [
            {
                name: '男士休闲裤夏季新款',
                image: 'images/goods-1.png',
                sku: '颜色：灰色 尺码：L',
                price: 99.00,
                quantity: 1,
                checked: false
            },
            {
                name: '男士夏季装短袖polo衫',
                image: 'images/goods-2.png',
                sku: '颜色：浅蓝 尺码：M',
                price: 199.00,
                quantity: 1,
                checked: false
            }
        ],
        // 用于控制全选复选框的选中状态
        isSelectAllChecked: false,
        isCartVisible: true,
    },
    computed: {
        toggleCartVisibility() {
            16            
            this.isCartVisible = !this.isCartVisible;
            
                    },
        // 计算已选商品的总数量
        selectedCount() {
            return this.cartItems.reduce((total, item) => {
                if (item.checked) {
                    return total + item.quantity;
                }
                return total;
            }, 0);
        },
        // 计算购物车中所有商品的总价（仅计算选中商品的总价）
        totalPrice() {
            return this.cartItems.reduce((total, item) => {
                if (item.checked) {
                    return total + (item.price * item.quantity);
                }
                return total;
            }, 0);
        }
    },
    methods: {
        // 商品数量增加方法
        incrementQuantity(item) {
            item.quantity++;
        },
        // 商品数量减少方法，确保数量不小于1
        decrementQuantity(item) {
            if (item.quantity > 1) {
                item.quantity--;
            }
        },
        // 单个商品复选框点击时的处理方法
        updateSelectAllStatus() {
            const allChecked = this.cartItems.every((item) => item.checked);
            this.isSelectAllChecked = allChecked;
        },
        // 全选复选框点击时的处理方法
        toggleSelectAllCheck() {
            this.isSelectAllChecked =!this.isSelectAllChecked;
            this.cartItems.forEach((item) => {
                item.checked = this.isSelectAllChecked;
            });
        },
        // 删除选中商品的方法
        deleteSelectedItems() {
            this.cartItems = this.cartItems.filter(item => !item.checked);
            // 调用其他相关方法以更新UI或数据
            this.updateSelectAllStatus(); // 更新全选状态
            this.updateTotalPrice(); // 注意：实际上，由于totalPrice是计算属性，它会自动更新
            // 注意：我们没有直接调用checkEmptyCart，因为当cartItems为空时，
            // 相关的UI（如空购物车消息）应通过Vue的响应性自动更新。
            // 但如果您有需要在删除后立即执行的特定逻辑，可以在此处调用checkEmptyCart。
        },

// 注意：以下两个方法您可能不需要，因为它们在您的代码示例中未提及，
// 但为了完整性，我保留了clearCart中对它们的调用。如果不需要，请删除。
checkEmptyCart() {
    // 您可以添加逻辑来处理购物车为空的情况
    // 例如，显示一个消息或执行其他操作
    if (this.cartItems.length === 0) {
        this.$refs.emptyCartMessage.style.display = 'block';
    } else {
        this.$refs.emptyCartMessage.style.display = 'none';
    }
},
   // 清空购物车的方法
    clearCart() {   
    this.cartItems = [];   
    this.checkEmptyCart();
    this.updateTotalPrice();
    },
        
        // 处理商品数量输入框值改变的方法
        updateQuantity(event, item) {
            const newQuantity = parseInt(event.target.value);
            if (!isNaN(newQuantity) && newQuantity > 0) {
                item.quantity = newQuantity;
            } else {
                item.quantity = 1;
            }
        }
    }
});